<template>
  <div class="app-container">
    <div class="table-container">
      <div class="left">
         <el-radio-group style="margin-bottom: 10px;" v-model="statistics_type" size="small" @change="change_statistics_type_value">
          <el-radio-button  border label="1">通话收入</el-radio-button>
          <el-radio-button  border label="2">月租收入</el-radio-button>
          <el-radio-button  border label="3">充值收入</el-radio-button>
        </el-radio-group>
      </div>
      <div class="right">
        <el-form :inline="true" :model="search">
           <el-form-item>
            <el-input style="width:240px;" v-model="params.msisdn" type="text" placeholder="请选择号码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleCurrentChanges(1)">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="list">
      <el-table  class="borderMargin" highlight-current-row border :data="dataList" style="width: 100%" v-loading.body="listLoading">
        <el-table-column label="号码">
          <template slot-scope="scope">
            <div style="text-align:left;padding-left:10px;">{{scope.row.dialingPrefix?'(+'+scope.row.dialingPrefix+')':''}} {{scope.row.msisdn}} </div>
            <div style="text-align:left;padding-left:10px;">{{scope.row.countryName}}</div>
          </template>
        </el-table-column>
        <el-table-column label="充值话费">
          <template slot-scope="scope">
            +{{scope.row.price}}欧元
          </template>
        </el-table-column>
        <el-table-column label="充值时间">
          <template slot-scope="scope">
             {{scope.row.createdAt | formatDate}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <div class="right" v-if="total > 0">
        <el-pagination @current-change="handleCurrentChanges" background :current-page.sync="page" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import mixinsTable from '@/utils/mixins.table';
export default {
  name: 'topupinconme',
  mixins: [mixinsTable],
  data() {
    return {
      search: {},
      statistics_type: '3',
      dateValue: '',
      servicePath: '/tupup',
      rowIndex: '-1',
      IndexArr: [],
      map: {
        msisdn: [],
        mapTo: []
      }
    };
  },
  created() {
    this.getList(1, (data) => {
      this.getNumber();
      data.map((item, index) => {
        this.map.msisdn.push(item.msisdn);
        this.map.mapTo.push(item.to);
      });
    });
  },
  methods: {
    change_statistics_type_value(value) {
      this.$router.push({ path: value === '1' ? '/callincome' : value === '2' ? '/contcome' : '/topupinconme', query: { time: +new Date() } });
    },
    handleCurrentChanges(val) {
      this.getList(val, (data) => {
        this.getNumber();
        data.map((item, index) => {
          this.map.msisdn.push(item.msisdn);
          this.map.mapTo.push(item.to);
        });
      });
    },
    // 获取相同编号的数组
    getNumber() {
      let OrderObj = {};
      this.dataList.map((element, index) => {
        console.log(element);
        element.rowIndex = index;
        if (OrderObj[element.msisdn]) {
          OrderObj[element.msisdn].push(index);
        } else {
          OrderObj[element.msisdn] = [];
          OrderObj[element.msisdn].push(index);
        }
      });

      // 将数组长度大于1的值 存储到this.IndexArr（也就是需要合并的项）
      for (let k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.IndexArr.push(OrderObj[k]);
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        for (let i = 0; i < this.IndexArr.length; i++) {
          let element = this.IndexArr[i];
          for (let j = 0; j < element.length; j++) {
            let item = element[j];
            if (rowIndex === item) {
              if (j === 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                };
              } else if (j !== 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
          }
        }
      }
    }
  }
};
</script>
<style lang="scss">
.priceAccount{
  color:red;
  font-size:14px;
  margin-right: 50px;
}
.borderMargin td{
  padding: 12px 0px;
}
</style>
